{extend name="extra@admin/content"}
{block name="button"}

<div class="nowrap pull-rignt" style="margin-top:10px">
<div class="hr-line-dashed"></div>
<span style="color:red;"> 温馨提示：一旦保存新的商品属性，以前的商品属性就会被覆盖，所有与商品属性相关的操作都会受到影响，请谨慎操作</span>
</div>
{/block}
{block name="content"}
<style>
.ibox-content{
    overflow-y: scroll;
    overflow-x: hidden;
    /*height: 500px;*/
}
</style>
<form onsubmit="return false;" action="{:url('Goodsspec/savespecdetail')}" data-auto="true" method="post" class='layui-form' style='padding-top:20px'>
    {foreach name="goods_spec" item="v" key="k"}
    <div class="layui-form-item">
        <div class="layui-inline">
            <div class="layui-input-inline">
                <select name="spec_id[]" lay-verify="required" readonly="readonly" lay-search>
                    {volist name="goods_spec_name" id="v1"}
                        <option value="{$v1.id}" {if condition="$v.spec_id eq $v1.id"} selected {/if}>{$v1.name}</option>
                    {/volist}
                </select>
            </div>
            <div class="layui-input-inline" >
                <input type="text" name="detail[]" required="required" placeholder="请输入属性名称" autocomplete="off" class="layui-input" value="{$v.detail}" data-id="{$v.id}" onblur="savespec(this)">
            </div>
        </div>
        {if condition="$k neq 0"}
        <span class="layui-btn tianjiayihan" type="btn" data-id="{$v.id}" data-val="{$v.detail}" onclick="delspec(this);">移除</span>
        {/if}
    </div>
    {/foreach}
    <div class="layui-form-item" id="add">
        <div class="layui-inline">
            <span class="layui-btn tianjiayihan" type="btn" onclick="tianjia();">添加</span>
        </div>
        <div class="layui-inline">
            <span class="layui-btn tianjiayihan" type="btn" data-confirm="重新生成属性会删除原先的属性，确定重新生成吗？" onclick="createspec();">生成属性</span>
        </div>
    </div>
    <div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline" >
                    属性：
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" >
                    价格：
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" >
                    会员价格：
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" >
                    安全库存：
                </div>
            </div>
        </div>
    </div>
    <div id="create">
        {foreach name="goods_spec_detail" item="v2"  key="kk"}
        <div class="layui-form-item">
            <div class="layui-inline">
                <div class="layui-input-inline" >
                    <input type="text" name="title[]" required="required" readonly="readonly" placeholder="" autocomplete="off" class="layui-input" value="{$v2.title}">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" >
                    <input type="text" name="price[]" required="required" placeholder="请输入属性价格" autocomplete="off" class="layui-input" value="{$v2.price}" data-id="{$v2.id}" onblur="saveval(this,'price')">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" >
                    <input type="text" name="member_price[]" required="required" placeholder="请输入会员价格" autocomplete="off" class="layui-input" value="{$v2.member_price}" data-id="{$v2.id}" onblur="saveval(this,'member_price')">
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-input-inline" >
                    <input type="text" name="warn_stock[]" required="required" placeholder="请输入安全库存" autocomplete="off" class="layui-input" value="{$v2.warn_stock}" data-id="{$v2.id}" onblur="saveval(this,'warn_stock')">
                </div>
            </div>
            {if condition="$kk neq 0"}
            <span class="layui-btn tianjiayihan" type="btn" data-id="{$v2.id}" onclick="del(this,'goods_spec_detail');">移除</span>
            {/if}
            <input type="hidden" name="specs[]" value="{$v2.specs}">
            <input type="hidden" name="id[]" value="{$v2.id}">
        </div>
        {/foreach}
    </div>
    <div class="hr-line-dashed"></div>
    <div class="col-sm-4 col-sm-offset-2">
        <input type='hidden' value='{$id}' name='goods_id'/>
        <input type="hidden" name="sign" value="1">
        <div class="layui-form-item text-center">
            <button class="layui-btn" type="submit" onclick="">保存</button>
        </div>
    </div>
    <script type="text/javascript">
    layui.use('form', function(){
        var form = layui.form;      //只有执行了这一步，部分表单元素才会自动修饰成功
        form.render();
    });
    /**
     * 添加属性
     * @Author   lingyun
     * @DateTime 2017-11-30T19:50:42+0800
     * @return   {[type]}                 [description]
     */
    function tianjia(){
        var ht = '<div class="layui-form-item"><div class="layui-inline"><div class="layui-input-inline"><select name="spec_id[]" lay-verify="required" lay-search>{volist name="goods_spec_name" id="v1"}<option value="{$v1.id}" >{$v1.name}</option>{/volist}</select></div><div class="layui-input-inline" ><input type="text" name="detail[]" required="required" placeholder="请输入属性名称" autocomplete="off" class="layui-input"></div></div><span class="layui-btn tianjiayihan" type="btn" onclick="reduce(this);">移除</span></div>';
        // var html = ht;
        // var html = '<div class="layui-form-item">'+ht+'</div>';
        // alert(html);
        $("#add").before(ht);
        window.form.render('select'); //刷新select选择框渲染
        $('#create').empty();       //清空元素内部元素
    }
    function reduce(obj){
        $(obj).parent().remove();
    }
    /**
     * 生成属性
     * @Author   lingyun
     * @DateTime 2017-11-30T20:09:49+0800
     * @return   {[type]}                 [description]
     */
    function createspec(){
        var spec_id = new Array();      //属性id
        var spec_name = new Array();    //属性的名称
        var title = new Array();    //属性分类 1140-18 = 1122
        var goods_id = $('input[name=goods_id]').val();
        var status = 1;
        $("select option:selected").each(function(){
            if($(this).parent().parent().parent().find('input[name="detail[]"]').val() == ''){
                status = 0;     //结束标志
                layer.msg('请输入属性名称'); 
                return false;
            }
            var specid = $(this).val();
            var specname = $(this).parent().parent().parent().find('input[name="detail[]"]').val();
            var speccate = $(this).text();
            var titles = speccate+': '+specname;     //组合属性名称
            // if(spec_id.indexOf(specid)<0){    //不存在返回-1
                spec_id.push(specid);
            // }   
            // if(specname.indexOf(spec_name)<0){
                spec_name.push(specname);
            // }
            // if(specname.indexOf(spec_name)<0){
                title.push(titles);
            // }
        });
        if(status == 0){
            return false;
        }
        $.post('{:url("Goodsspec/addspeccate")}',
        {goods_id:goods_id,spec_id:spec_id,spec_name:spec_name,title:title},
        function(data){
            $('#create').empty();       //清空元素内部元素
            $("#create").append(data.msg);
            return false;
        });
        return false;
    }
    //删除商品属性
    function delspec(obj){
        var id = $(obj).attr('data-id');
        var ve = $(obj).attr('data-val');
        var goods_id = $('input[name=goods_id').val();

        $.post('{:url("Goodsspec/delspec")}',
            {id:id,goods_id:goods_id},
            function(data){
                $("input[name='title[]']").each(function(){
                    if($(this).val().indexOf(ve)>=0){
                        $(this).parent().parent().parent().remove();
                    }
                });
//                $(obj).parent().remove();       //移除元素
//                $('#create').empty();       //清空元素内部元素
//                $("#create").append(data.msg);
                return false;
        });
        return false;
    }   
    /**
     * 删除商品属性详情
     * @Author   lingyun
     * @DateTime 2017-12-01T15:03:30+0800
     * @return   {[type]}                 [description]
     */
    function del(obj,database){
        var id = $(obj).attr('data-id');
        $.post('{:url("Goodsspec/del")}',
            {id:id,database:database},
            function(data){
                $(obj).parent().remove();       //移除元素
                // $('#create').empty();       //清空元素内部元素
                // $("#create").append(data.msg);
                return false;
        });
        return false;
    }
    /**
     * 修改属性详情值
     * @Author   lingyun
     * @DateTime 2017-12-01T15:46:45+0800
     * @return   {[type]}                 [description]
     */
    function saveval(obj,field){
        var id = $(obj).attr('data-id');
        var val = $(obj).val();
        $.post('{:url("Goodsspec/saveval")}',
            {id:id,val:val,field:field},
            function(data){
                if(data.code == 1){
                    // layer.msg('修改成功'); 
                }
                // $(obj).parent().remove();       //移除元素
                // $('#create').empty();       //清空元素内部元素
                // $("#create").append(data.msg);
                return false;
        });
        return false;
    }
    /**
     * 修改属性名称，一旦修改则重新生成属性组合
     * @Author   lingyun
     * @DateTime 2017-12-01T15:54:50+0800
     * @return   {[type]}                 [description]
     */
    function savespec(obj){
        var id = $(obj).attr('data-id');
        var val = $(obj).val();
        var goods_id = $('input[name=goods_id]').val();
        $.post('{:url("Goodsspec/savespec")}',
            {id:id,val:val,goods_id:goods_id},
            function(data){
                // $(obj).parent().remove();       //移除元素
                if(data.code == 1){
                    var spec_name = data.data.spec_name;
                    var reg = new RegExp(spec_name,"ig")

                    $("input[name='title[]']").each(function(){
                        var obj = $(this);
                        obj.val(obj.val().replace(reg,val));
                    });

                    layer.msg(data.msg, {
                        icon: 1,
                        time: 1000 //2秒关闭（如果不配置，默认是3秒）
                    }, function () {
//                $("#sub").removeAttr("disabled");
                    });
//                    location.reload();
                }
                // $("#create").append(data.msg);
                return false;
        });
        return false;
    }
</script>
</form>

{/block}